<template>
  <div class="chat">
    <div class="chat-header">
      <span class="chat-title-icon"></span>
      <p class="chat-title">聊天记录</p>
    </div>
    <div id="chatMessageScrollWrap" class="chat-body">
      <ul id="chatMessageWrap" class="chat-message-wrap"></ul>
    </div>
  </div>
</template>

<script>
import Render from '@views/live/cc/common/render'
import Component from '@views/live/cc/common/component'
import Utils from '@views/live/cc/common/utils'
export default {
  data() {
    return {
      render: new Render(),
      component: new Component(),
      HDScene: window.replayHDScene,
      isScroll: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.HDScene.onChatMessageSync(message => {
        Utils.log('addMessage', message)
        this.filterChatMessage(message)
      })

      window.showMsgImage = function(event) {
        Utils.log('showMsgImage', event)
      }

      let chatMessageScrollWrap = this.render.getNode('chatMessageScrollWrap')

      this.component.bind(chatMessageScrollWrap, 'mouseleave', () => {
        this.isScroll = true
      })
      this.component.bind(chatMessageScrollWrap, 'mouseenter', () => {
        this.isScroll = false
      })
    },
    filterChatMessage(message) {
      //分组
      if (!this.isWithGroupId(message)) {
        return false
      }

      //聊天审核
      if (message.userid === this.HDScene.viewerId) {
        message.status = 0
      }

      this.addMessage(message)
    },

    isWithGroupId(data) {
      let groupId = data.groupId
      if (!groupId) {
        return true
      }

      let role = ''
      if (data.userrole) {
        role = data.userrole
      } else if (data.userRole) {
        role = data.userRole
      } else if (data.fromuserrole) {
        role = data.fromuserrole
      } else if (data.answerUserRole) {
        role = data.answerUserRole
      } else if (data.fromuserrole) {
        role = data.fromuserrole
      } else if (data.role) {
        role = data.role
      }

      if (role && role === 'publisher') {
        return true
      }

      if (this.HDScene.groupId && this.HDScene.groupId !== groupId) {
        return false
      }

      return true
    },

    addMessage(message) {
      let messageTemplate = `
       <li class="chat-content-wrap" style="display: ${message.status == '0' ? 'block' : 'none'}">
        <p class="chat-name ${message.userRole !== 'student' ? 'teacher' : ''}">${
        message.username
      }：</p>
        <div class="chat-message">
          ${Utils.showEm(message.msg)}
        </div>
      </li>
    `
      let chatMessageWrap = this.render.getNode('chatMessageWrap')
      this.render.appendChild(chatMessageWrap, messageTemplate)
      this.scrollTopMessage(chatMessageWrap)
    },

    scrollTopMessage() {
      if (!this.isScroll) {
        return false
      }
      let chatMessageScrollWrap = this.render.getNode('chatMessageScrollWrap')
      let scrollHeight = chatMessageScrollWrap.scrollHeight
      chatMessageScrollWrap.scrollTop = scrollHeight
    }
  }
}
</script>

<style lang="scss">
@import './chat.scss';
</style>
